/**
 * @Author:marina
 * @Date: 2025-02-12 09:51:22 
 * @Description:动态横向柱状图
 */

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import * as echarts from 'echarts';

function makeEchart() {
    let chartDom = document.getElementById('echart');
    let myChart = echarts.init(chartDom);
    let option: echarts.EChartsCoreOption

    const data: number[] = [];
    for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
    }
    option = {
        xAxis: {
            max: 'dataMax'
        },
        yAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 2 // only the largest 3 bars will be displayed
        },
        series: [
            {
                realtimeSort: true,
                name: 'X',
                type: 'bar',
                data: data,
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };
    function run() {
        for (var i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
                data[i] += Math.round(Math.random() * 2000);
            } else {
                data[i] += Math.round(Math.random() * 200);
            }
        }
        myChart.setOption({
            series: [
                {
                    type: 'bar',
                    data
                }
            ]
        });
    }
    setTimeout(function () {
        run();
    }, 0);
    setInterval(function () {
        run();
    }, 3000);

    option && myChart.setOption(option);
}



onMounted: {
    setTimeout(function () {
        makeEchart()
    }, 2000);

}

</script>

<template>
    <div
        :style="{ width: '800px', height: '350px' }"
        id="echart"
    >
    </div>
</template>
